<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				width: 100px;
				height: 100px;
				background: #f00;
				/* 告诉浏览器哪个属性要执行过度效果 */
				/* transition-property: width; */
				/* 过度时间多久 */
				/* transition-duration: 5s; */
				
				/* 多个属性同时过度 */
				transition-property: width,background;
				transition-duration: 5s,3s;
				transition-delay: 3s;
			}
			/* :hover为类选择器除了可用在a标签外，也可用在其他标签 */
			.box:hover{
				width: 500px;
				background: #00f;
				
				
			}
			
		</style>
	</head>
	<body>
		<!-- 
			1过渡三要素
			1-1必须要有属性发生变化
			1-2必须告诉系统哪个属性需要执行过渡效果
			1-3必须告诉系统过渡效果持续时长
			注意点
			当多个属性需要同时执行过渡效果时用逗号隔开即可
		 -->
		 <div class="box"></div>
		 <div class="box1"></div>
	</body>
</html>
